<script setup lang="ts">
const name = "animaCard1"
import {ref , onMounted , toRefs} from "vue"
import Typed from "typed.js";

let typed: any = null;
const pRef = ref<HTMLParagraphElement>();


onMounted(() => {
    // console.log('_______')

    if (pRef.value) {
        const options = {
            strings: ["Arprt", "Arpat Tge", "Arpat The Graert" , "Arpat The Great"],
            typeSpeed: 60,
            showCursor: false,
            backSpeed: 60,
            backDelay: 0,
        };
        typed = new Typed(pRef.value, options);
    }
})

const checkBtn = () => {
    typed?.reset();
    typed?.start();
}



</script>

<template>
    <div class="animaCard">
        <div class="textView" >
            <p ref="pRef" />
        </div>
        <el-button type="primary" size="large" @click="checkBtn" >{{ name }}</el-button>
    </div>
</template>

<style scoped lang="scss">

.animaCard{
    margin: 10px;
    background-color: white;
    width: 380px;
    height: 120px;
    //display: flex;
    text-align: center;
    .textView{
        height: 50px;
        padding-top: 15px;

        p{
            font-size: 1.6em;
            font-family: Arial;
        }

    }
}

</style>